<template>
  <v-card flat>
    <v-list class="py-0" dense>
      <v-list-item-group>
        <v-list-item @click="paymentMethod = 'online'">
          <v-list-item-icon class="mr-1">
            <v-icon
              size="18"
              :color="onlineIconColor"
              v-text="`mdi-${onlineIcon}`"
            ></v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>在线支付</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <!-- <v-divider></v-divider>
        <v-list-item @click="paymentMethod = 'inCash'">
          <v-list-item-icon class="mr-1">
            <v-icon
              size="18"
              :color="inCashIconColor"
              v-text="`mdi-${inCashIcon}`"
            ></v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>货到付款</v-list-item-title>
          </v-list-item-content>
          <span class="caption text--secondary"
            >需付5元手续费，仅支持2000元以下订单</span
          >
        </v-list-item> -->
      </v-list-item-group>
    </v-list>
  </v-card>
</template>

<script>
export default {
  name: 'amount-info',
  data() {
    return {
      paymentMethod: ''
    };
  },
  computed: {
    onlineIcon() {
      return this.paymentMethod === 'online'
        ? 'radiobox-marked'
        : 'radiobox-blank';
    },
    inCashIcon() {
      return this.paymentMethod === 'inCash'
        ? 'radiobox-marked'
        : 'radiobox-blank';
    },
    onlineIconColor() {
      return this.paymentMethod === 'online' ? '#2AB795' : '';
    },
    inCashIconColor() {
      return this.paymentMethod === 'inCash' ? '#2AB795' : '';
    }
  }
};
</script>
